import MainTitle from '@/components/MainTitle';
import { withSelector } from '@/utils/hoc'
import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
import request from '@/utils/request'
import { Button, Table, Badge, ConfigProvider } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import './Table.scss'
function Index(props) {
    const style = { background: '#fff', padding: '30px', margin: '40px 0', position: 'relative' };
    const [parameter, setParameter] = useState({})
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            render: (text, record) => <a onClick={goUserInfo(record.account)}>{text}</a>
        },
        {
            title: '学号',
            dataIndex: 'account',
            // key: 'age',
        },
        {
            title: '宿舍楼',
            dataIndex: 'buildingName',
        },
        {
            title: '楼层',
            dataIndex: 'floorLayer',

        }, {
            title: '宿舍号',
            dataIndex: 'roomNumber',
            render: (text, record) => <a onClick={goRoomInfo(record.roomId)}>{text}</a>

        }, {
            title: '日期',
            dataIndex: 'date',
        }, {
            title: '时间',
            dataIndex: 'time',
        }
    ];
    //获取数据
    const [record, setRecord] = useState({})
    const getRecordTableData = useCallback(async (values, current = 1, step = 10) => {
        const { data } = await request.get('record/getRecordTableData', { params: { ...values, current, step } });
        setRecord(data.data);
    }, []);
    // 分页回调
    const changePage = useCallback((page, pageSize) => {
        getRecordTableData(parameter, page, pageSize);
    }, [parameter])
    //跳转用户信息页
    const goUserInfo = useCallback(id => {
        return () => {
            props.history.push(`/subject/studentsInfo?account=${id}`)
        }
    })
    //跳转宿舍信息页
    const goRoomInfo = useCallback(id => {
        return () => {
            props.history.push(`/subject/roomInfo?roomId=${id}`)
        }
    })
    //点击获取数据
    const getData = useCallback(() => {
        setParameter({ ...props.groupId, type: props.recordType, startTime: props.date[0], endTime: props.date[1] })
        getRecordTableData({ ...props.groupId, type: props.recordType, startTime: props.date[0], endTime: props.date[1] });
    })
    useEffect(() => {

    }, [])
    return (
        <>
            <MainTitle>记录筛选器</MainTitle>
            <div className='wrapper' style={style}>
                {
                    props.render({
                        date: true,
                        selectNum: 4
                    })
                }

                <Button type="primary" htmlType="submit" shape='circle' size='large' style={{ position: 'absolute', right: 35, bottom: -20 }} icon={<SearchOutlined />} onClick={getData}>
                </Button>



            </div>
            <MainTitle>记录详情</MainTitle>
            <div className='dashboard_newest' style={style}>
                <Table
                    dataSource={record.rows}
                    rowKey='id'
                    //  dataSource={dataSource}
                    pagination={{
                        position: ['bottomLeft'],
                        onChange: changePage,
                        total: record.count,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        showTotal: () => `共${record.count}条`
                    }}
                    columns={props.recordType === 'getup' ? [...columns, { title: '是否早起', dataIndex: 'early', render: text => (text ? <Badge status="success" /> : <Badge status="error" />) }] : (props.recordType === 'back' ? [...columns, { title: '是否早归', dataIndex: 'early', render: text => (text ? <Badge status="success" /> : <Badge status="error" />) }] : columns)}
                />


            </div>

        </>
    )
}
export default withSelector(Index)